<template>
  <div>
    <div
      v-for="(item, i) in datas.mouthExamine"
      v-if="inputType == '1'"
      :key="i"
      class="p-item"
    >
      <ct-modules
        v-model="datas.mouthExamine[i].position"
        style="width: 200px; margin-right: 16px"
        position="right"
        @change="updateDetail('1')"
      />
      <el-input
        v-model="datas.mouthExamine[i].content"
        type="textarea"
        placeholder="请输入内容"
        style="width: 750px"
        @click.native="showDv($event, 'kqjc' + i)"
      />
      <el-button
        class="btn-del"
        type="danger"
        @click="delPosition(inputType, i)"
        >删除</el-button
      >
      <div
        :ref="'kqjc' + i"
        class="dv-case div-case-small"
        @mouseleave="closeDv($event, 'kqjc' + i)"
      >
        <div class="case-item flex">
          <div class="case-label">常规检查：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">探</span>
            <span @click="addText($event, i)">叩</span>
            <span @click="addText($event, i)">松动</span>
            <span @click="addText($event, i)">牙龈</span>
            <span @click="addText($event, i)">-</span>
            <span @click="addText($event, i)">±</span>
            <span @click="addText($event, i)">+</span>
            <span @click="addText($event, i)">+ +</span>
            <span @click="addText($event, i)">+ + +</span>
          </div>
        </div>

        <div class="case-item flex">
          <div class="case-label">特殊检查：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">冷测试</span>
            <span @click="addText($event, i)">热测试</span>
            <span @click="addText($event, i)">电活力测试</span>
            <span @click="addText($event, i)">敏感</span>
            <span @click="addText($event, i)">疼痛</span>
            <span @click="addText($event, i)">迟钝</span>
            <span @click="addText($event, i)">无反应</span>
            <span @click="addText($event, i)">正常</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">龋坏：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">浅龋坏</span>
            <span @click="addText($event, i)">龋坏</span>
            <span @click="addText($event, i)">深大龋坏</span>
            <span @click="addText($event, i)">白垩色</span>
            <span @click="addText($event, i)">墨浸样改变</span>
            <span @click="addText($event, i)">质软</span>
            <span @click="addText($event, i)">质硬</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">非龋坏：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">畸形尖</span>
            <span @click="addText($event, i)">畸形沟</span>
            <span @click="addText($event, i)">冠根折</span>
            <span @click="addText($event, i)">微裂纹</span>
            <span @click="addText($event, i)">氟斑牙</span>
            <span @click="addText($event, i)">楔形缺损</span>
            <span @click="addText($event, i)">重度磨耗</span>
            <span @click="addText($event, i)">釉质发育不全</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">旧填充：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">牙色充填体</span>
            <span @click="addText($event, i)">银汞充填体</span>
            <span @click="addText($event, i)">电活力测试</span>
            <span @click="addText($event, i)">暂封材料</span>
            <span @click="addText($event, i)">边缘可</span>
            <span @click="addText($event, i)">边缘蜜合</span>
            <span @click="addText($event, i)">边缘不蜜合</span>
            <span @click="addText($event, i)">继发龋坏</span>
            <span @click="addText($event, i)">悬突</span>
            <span @click="addText($event, i)">充填体部分脱落</span>
            <span @click="addText($event, i)">充填体折断</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">牙周：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">口腔卫生状况不良,牙龈红肿</span>
            <span @click="addText($event, i)">牙石</span>
            <span @click="addText($event, i)">软垢</span>
            <span @click="addText($event, i)">色素</span>
            <span @click="addText($event, i)">BI=</span>
            <span @click="addText($event, i)">PD=</span>
            <span @click="addText($event, i)">AL=</span>
          </div>
        </div>
      </div>
    </div>
    <div
      v-for="(item, i) in datas.subsidiaryExamine"
      v-if="inputType == '2'"
      :key="i"
      class="p-item"
    >
      <ct-modules
        v-model="item.position"
        style="width: 200px; margin-right: 16px"
        position="right"
        @change="updateDetail('2')"
      />
      <el-input
        v-model="item.content"
        type="textarea"
        placeholder="请输入内容"
        style="width: 750px"
        @click.native="showDv($event, 'fzjc' + i)"
      />
      <el-button
        class="btn-del"
        type="danger"
        @click="delPosition(inputType, i)"
        >删除</el-button
      >
      <div
        :ref="'fzjc' + i"
        class="dv-case div-case-small"
        @mouseleave="closeDv($event, 'fzjc' + i)"
      >
        <div class="case-item flex">
          <div class="case-label">常规检查：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">探</span>
            <span @click="addText($event, i)">叩</span>
            <span @click="addText($event, i)">松动</span>
            <span @click="addText($event, i)">牙龈</span>
            <span @click="addText($event, i)">-</span>
            <span @click="addText($event, i)">±</span>
            <span @click="addText($event, i)">+</span>
            <span @click="addText($event, i)">+ +</span>
            <span @click="addText($event, i)">+ + +</span>
          </div>
        </div>

        <div class="case-item flex">
          <div class="case-label">特殊检查：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">冷测试</span>
            <span @click="addText($event, i)">热测试</span>
            <span @click="addText($event, i)">电活力测试</span>
            <span @click="addText($event, i)">敏感</span>
            <span @click="addText($event, i)">疼痛</span>
            <span @click="addText($event, i)">迟钝</span>
            <span @click="addText($event, i)">无反应</span>
            <span @click="addText($event, i)">正常</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">龋坏：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">浅龋坏</span>
            <span @click="addText($event, i)">龋坏</span>
            <span @click="addText($event, i)">深大龋坏</span>
            <span @click="addText($event, i)">白垩色</span>
            <span @click="addText($event, i)">墨浸样改变</span>
            <span @click="addText($event, i)">质软</span>
            <span @click="addText($event, i)">质硬</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">非龋坏：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">畸形尖</span>
            <span @click="addText($event, i)">畸形沟</span>
            <span @click="addText($event, i)">冠根折</span>
            <span @click="addText($event, i)">微裂纹</span>
            <span @click="addText($event, i)">氟斑牙</span>
            <span @click="addText($event, i)">楔形缺损</span>
            <span @click="addText($event, i)">重度磨耗</span>
            <span @click="addText($event, i)">釉质发育不全</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">旧填充：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">牙色充填体</span>
            <span @click="addText($event, i)">银汞充填体</span>
            <span @click="addText($event, i)">电活力测试</span>
            <span @click="addText($event, i)">暂封材料</span>
            <span @click="addText($event, i)">边缘可</span>
            <span @click="addText($event, i)">边缘蜜合</span>
            <span @click="addText($event, i)">边缘不蜜合</span>
            <span @click="addText($event, i)">继发龋坏</span>
            <span @click="addText($event, i)">悬突</span>
            <span @click="addText($event, i)">充填体部分脱落</span>
            <span @click="addText($event, i)">充填体折断</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">牙周：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">口腔卫生状况不良,牙龈红肿</span>
            <span @click="addText($event, i)">牙石</span>
            <span @click="addText($event, i)">软垢</span>
            <span @click="addText($event, i)">色素</span>
            <span @click="addText($event, i)">BI=</span>
            <span @click="addText($event, i)">PD=</span>
            <span @click="addText($event, i)">AL=</span>
          </div>
        </div>
      </div>
    </div>
    <div
      v-for="(item, i) in datas.diagnose"
      v-if="inputType == '3'"
      :key="i"
      class="p-item"
    >
      <ct-modules
        v-model="item.position"
        style="width: 200px; margin-right: 16px"
        position="right"
        @change="updateDetail('3')"
      />
      <el-input
        v-model="item.content"
        type="textarea"
        placeholder="请输入内容"
        style="width: 750px"
        @click.native="showDv($event, 'zd' + i)"
      />
      <el-button
        class="btn-del"
        type="danger"
        @click="delPosition(inputType, i)"
        >删除</el-button
      >
      <div
        :ref="'zd' + i"
        class="dv-case div-case-small"
        @mouseleave="closeDv($event, 'zd' + i)"
      >
        <div class="case-item flex">
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">深龋（LC01）</span>
            <span @click="addText($event, i)">继发龋（LC02）</span>
            <span @click="addText($event, i)">楔状缺损（LC03）</span>
            <span @click="addText($event, i)">慢性牙髓炎（LC04）</span>
            <span @click="addText($event, i)">慢性根尖炎（LC05）</span>
            <span @click="addText($event, i)">慢性牙周炎（LC06）</span>
            <span @click="addText($event, i)">冠周炎（LC07）</span>
            <span @click="addText($event, i)">残根（LC08）</span>
            <span @click="addText($event, i)">残冠（LC09）</span>
            <span @click="addText($event, i)">阻生齿（LC10）</span>
            <span @click="addText($event, i)">牙列缺损（LC11）</span>
            <span @click="addText($event, i)">牙列缺失（LC12）</span>
            <span @click="addText($event, i)">不良修复体（LC13）</span>
          </div>
        </div>
      </div>
    </div>
    <div
      v-for="(item, i) in datas.curePlan"
      v-if="inputType == '4'"
      :key="i"
      class="p-item"
    >
      <ct-modules
        v-model="item.position"
        style="width: 200px; margin-right: 16px"
        position="right"
        @change="updateDetail('4')"
      />
      <el-input
        v-model="item.content"
        type="textarea"
        placeholder="请输入内容"
        style="width: 750px"
        @click.native="showDv($event, 'zljh' + i)"
      />
      <el-button
        class="btn-del"
        type="danger"
        @click="delPosition(inputType, i)"
        >删除</el-button
      >
      <div
        :ref="'zljh' + i"
        class="dv-case div-case-small"
        @mouseleave="closeDv($event, 'zljh' + i)"
      >
        <div class="case-item flex">
          <div class="case-label">修复：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">冠修复</span>
            <span @click="addText($event, i)">桩冠修复</span>
            <span @click="addText($event, i)">活动义齿修复</span>
            <span @click="addText($event, i)">全口活动义齿修复</span>
            <span @click="addText($event, i)">种植修复</span>
            <span @click="addText($event, i)">贴面修复</span>
            <span @click="addText($event, i)">美白</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">儿牙：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">窝沟封闭</span>
            <span @click="addText($event, i)">充填治疗</span>
            <span @click="addText($event, i)">根管治疗</span>
            <span @click="addText($event, i)">乳牙拔除</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">外科：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">拔出</span>
            <span @click="addText($event, i)">手术切除</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">正畸：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">隐形矫治</span>
            <span @click="addText($event, i)">固定矫治</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">牙体牙髓：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">充填治疗</span>
            <span @click="addText($event, i)">根管治疗</span>
            <span @click="addText($event, i)">根管再治疗</span>
            <span @click="addText($event, i)">根管治疗+冠修复</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">牙周：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">OHI</span>
            <span @click="addText($event, i)">洁治</span>
            <span @click="addText($event, i)">刮治、根面平整</span>
            <span @click="addText($event, i)">冠延长手术</span>
            <span @click="addText($event, i)">牙周手术</span>
          </div>
        </div>
      </div>
    </div>
    <div
      v-for="(item, i) in datas.dispose"
      v-if="inputType == '5'"
      :key="i"
      class="p-item"
    >
      <ct-modules
        v-model="item.position"
        style="width: 200px; margin-right: 16px"
        position="right"
        @change="updateDetail('5')"
      />
      <el-input
        v-model="item.content"
        type="textarea"
        placeholder="请输入内容"
        style="width: 750px"
        @click.native="showDv($event, 'cz' + i)"
      />
      <el-button
        class="btn-del"
        type="danger"
        @click="delPosition(inputType, i)"
        >删除</el-button
      >
      <div
        :ref="'cz' + i"
        class="dv-case div-case-small"
        @mouseleave="closeDv($event, 'cz' + i)"
      >
        <div class="case-item flex">
          <div class="case-label">口腔宣教：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >OHI口腔卫生宣教，刷牙、牙线、间隙刷使用宣教</span
            >
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">知情同意：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >向患者交代病情、治疗计划、费用、预后等，患者知情并同意治疗</span
            >
            <span @click="addText($event, i)"
              >解释病情，患者及家属知情，要求考虑，择日治疗</span
            >
            <span @click="addText($event, i)"
              >告知病情，治疗方案，费用，风险，患者要求拔牙，知情同意</span
            >
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">麻醉：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">4%阿替卡因局部浸润麻醉</span>
            <span @click="addText($event, i)">4%阿替卡因阻滞麻醉</span>
            <span @click="addText($event, i)">2%利多卡因局部浸润麻醉</span>
            <span @click="addText($event, i)">2%利多卡因阻滞麻醉</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">充填：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >去尽腐质，达牙本质深层，未及露髓点,比色,排龈,领面,去尽龋坏,常规医嘱,不适随诊,护髓,垫底，树脂充填，调磨充填体高点，抛光</span
            >
            <span @click="addText($event, i)">去旧充填体</span>
            <span @click="addText($event, i)">dycal护髓</span>
            <span @click="addText($event, i)">玻璃离子垫底</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">根管：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >Glyde辅助下，机用镍钛，根管预备</span
            >
            <span @click="addText($event, i)"
              >冲洗，荡洗，干燥，根管封药，暂封</span
            >
            <span @click="addText($event, i)">拍片，恰填</span>
            <span @click="addText($event, i)"
              >根管不通畅，疏通根管，超声尖去除髓腔钙化物</span
            >
            <span @click="addText($event, i)">橡皮障</span>
            <span @click="addText($event, i)">显微镜</span>
            <span @click="addText($event, i)">5.25%NaClO冲洗</span>
            <span @click="addText($event, i)">封药Ca（OH）2</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">牙周：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >3%双氧水含漱，超声洁治、抛光，3%双氧水冲洗，上药</span
            >
            <span @click="addText($event, i)">刮治，根面平整</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">拔牙：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >分龈，增隙、挺松，钳拔除，搔刮，生理盐水冲洗，置明胶海绵，压迫止血</span
            >
            <span @click="addText($event, i)">切开翻瓣</span>
            <span @click="addText($event, i)">缝合，1针</span>
            <span @click="addText($event, i)">消毒，拆线，生理盐水冲洗</span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">修复：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">基牙预备，精修</span>
            <span @click="addText($event, i)"
              >制取硅橡胶印模，硅橡胶咬合记录</span
            >
            <span @click="addText($event, i)">临时冠修复</span>
            <span @click="addText($event, i)"
              >去除临时冠及暂封材料，清洁基牙和修复体</span
            >
            <span @click="addText($event, i)"
              >试戴修复体边缘密合，邻接良好</span
            >
            <span @click="addText($event, i)">调合、抛光，永久粘固</span>
            <span @click="addText($event, i)"
              >灌制石膏模型，口外制作个别托盘</span
            >
            <span @click="addText($event, i)"
              >试支架，就位顺利，基托密合，固位良好，无翘动</span
            >
            <span @click="addText($event, i)"
              >戴义齿，就位顺利，固位良好，基托密合，无翘动</span
            >
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">种植：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)"
              >常规消毒铺巾，4%阿替卡因1.7mlX1支/碧兰麻局部浸润麻醉，在牙槽嵴顶做水平切口，全层切开粘骨膜，翻瓣，定位，备洞至预定深度，置入植体，旋入覆盖螺丝，减张缝合，拍片位置可。常规消毒铺巾，4%阿替卡因1.7mlX1支/碧兰麻局部浸润麻醉，在牙槽嵴顶做水平切口，全层切开粘骨膜，翻瓣，定位，备洞至预定深度，置入植体，旋入覆盖螺丝，减张缝合，拍片位置可</span
            >
            <span @click="addText($event, i)">植入骨粉</span>
            <span @click="addText($event, i)"
              >种植术区消毒，拆除缝合线，局部上药</span
            >
            <span @click="addText($event, i)"
              >去除临时冠及暂封材料，清洁基牙和修复体</span
            >
            <span @click="addText($event, i)"
              >切开翻瓣，暴露覆盖螺丝。拆下覆盖螺丝，局部冲洗，旋入愈合帽，加扭力15Ncm</span
            >
            <span @click="addText($event, i)"
              >旋出愈合帽，局部冲洗吹干。旋入取模柱，拍片确认取模柱到位，制取硅橡胶印模。重新旋入愈合帽。咬合记录</span
            >
            <span @click="addText($event, i)">
              旋出愈合帽，局部冲洗吹干。
              在就位导板的引导下旋入种植基台，拍片确认基台到位。试戴，冠边缘密合性良好，邻接良好。
              调合、抛光。患者对修复体形态颜色满意，确认后，基台加扭力35Ncm。封闭螺丝孔
            </span>
          </div>
        </div>
        <div class="case-item flex">
          <div class="case-label">正畸：</div>
          <div class="case-content flex flex-wrap">
            <span @click="addText($event, i)">取模型，照相，正、侧位片</span>
            <span @click="addText($event, i)">粘托槽、带环</span>
            <span @click="addText($event, i)">去除托槽、带环</span>
            <span @click="addText($event, i)">加力</span>
            <span @click="addText($event, i)">片切</span>
            <span @click="addText($event, i)">调合</span>
            <span @click="addText($event, i)">弓丝：尺寸，材质，弯曲</span>
            <span @click="addText($event, i)">牵引：类型，型号，时间</span>
            <span @click="addText($event, i)">活动矫治器：类型，处置</span>
          </div>
        </div>
      </div>
    </div>
    <div class="flex flex-text-end" style="width: 1072px">
      <el-button type="primary" @click="addPosition(inputType)"
        >添加牙位</el-button
      >
    </div>
  </div>
</template>
<script>
import CtModules from '@/components/yiya/CtModules'
export default {
  name: 'FastInput',
  components: {
    CtModules,
  },
  model: {
    prop: 'value',
    event: 'change',
  },
  props: {
    inputType: {
      //生成快捷输入的类型 1:口腔检查,2:辅助检查,3:诊断,4:治疗计划,5:处置
      type: String,
      default: '',
    },
    details: { type: Object, default: () => {} },
    open: { type: Boolean, default: false },
  },

  data() {
    return {
      datas: {
        mouthExamine: [
          {
            position: '',
            content: '',
          },
        ],
        subsidiaryExamine: [
          {
            position: '',
            content: '',
          },
        ],
        diagnose: [
          {
            position: '',
            content: '',
          },
        ],
        curePlan: [
          {
            position: '',
            content: '',
          },
        ],
        dispose: [
          {
            position: '',
            content: '',
          },
        ],
      },
    }
  },
  watch: {
    open(newVal) {
      if (newVal) {
        if (this.details !== undefined) {
          this.datas = this.details
        }
      }
    },
    immediate: true,
  },
  created() {
    this.init()
  },
  methods: {
    //初始化牙位信息对象
    init() {
      this.datas = this.details
      if (!this.datas) {
        this.datas = {
          mouthExamine: [
            {
              position: '',
              content: '',
            },
          ],
          subsidiaryExamine: [
            {
              position: '',
              content: '',
            },
          ],
          diagnose: [
            {
              position: '',
              content: '',
            },
          ],
          curePlan: [
            {
              position: '',
              content: '',
            },
          ],
          dispose: [
            {
              position: '',
              content: '',
            },
          ],
        }
      }
      if (this.inputType == '1') {
        if (!this.datas.mouthExamine) {
          this.datas.mouthExamine = [
            {
              position: '',
              content: '',
            },
          ]
        }
      }
      if (this.inputType == '2') {
        if (!this.datas.subsidiaryExamine) {
          this.datas.subsidiaryExamine = [
            {
              position: '',
              content: '',
            },
          ]
        }
      }
      if (this.inputType == '3') {
        if (!this.datas.diagnose) {
          this.datas.diagnose = [
            {
              position: '',
              content: '',
            },
          ]
        }
      }
      if (this.inputType == '4') {
        if (!this.datas.curePlan) {
          this.datas.curePlan = [
            {
              position: '',
              content: '',
            },
          ]
        }
      }
      if (this.inputType == '5') {
        if (!this.datas.dispose) {
          this.datas.dispose = [
            {
              position: '',
              content: '',
            },
          ]
        }
      }
    },
    //点击textarea显示下部选择框
    showDv(e, showRef) {
      let dvs = document.getElementsByClassName('dv-case')
      for (let i = 0; i < dvs.length; i++) {
        dvs[i].style.display = 'none'
      }
      this.$refs[showRef][0].style.display = 'block'
    },
    //鼠标移开隐藏下部选择框
    closeDv(e, closeRef) {
      this.$refs[closeRef][0].style.display = 'none'
    },
    //点击span添加内容
    addText(e, index) {
      if (this.inputType == '1') {
        this.datas.mouthExamine[index].content +=
          e.currentTarget.innerText + ','
        this.$emit('getDetail', { type: '1', obj: this.datas.mouthExamine })
      }
      if (this.inputType == '2') {
        this.datas.subsidiaryExamine[index].content +=
          e.currentTarget.innerText + ','
        this.$emit('getDetail', {
          type: '2',
          obj: this.datas.subsidiaryExamine,
        })
      }
      if (this.inputType == '3') {
        this.datas.diagnose[index].content += e.currentTarget.innerText + ','
        this.$emit('getDetail', { type: '3', obj: this.datas.diagnose })
      }
      if (this.inputType == '4') {
        this.datas.curePlan[index].content += e.currentTarget.innerText + ','
        this.$emit('getDetail', { type: '4', obj: this.datas.curePlan })
      }
      if (this.inputType == '5') {
        this.datas.dispose[index].content += e.currentTarget.innerText + ','
        this.$emit('getDetail', { type: '5', obj: this.datas.dispose })
      }
      this.$forceUpdate()
    },
    //添加牙位
    addPosition(type) {
      let positionObj = {
        position: '',
        content: '',
      }
      if (type == '1') {
        this.datas.mouthExamine.push(positionObj)
        this.$emit('getDetail', { type: '1', obj: this.datas.mouthExamine })
      }
      if (type == '2') {
        this.datas.subsidiaryExamine.push(positionObj)
        this.$emit('getDetail', {
          type: '2',
          obj: this.datas.subsidiaryExamine,
        })
      }
      if (type == '3') {
        this.datas.diagnose.push(positionObj)
        this.$emit('getDetail', { type: '3', obj: this.datas.diagnose })
      }
      if (type == '4') {
        this.datas.curePlan.push(positionObj)
        this.$emit('getDetail', { type: '4', obj: this.datas.curePlan })
      }
      if (type == '5') {
        this.datas.dispose.push(positionObj)
        this.$emit('getDetail', { type: '5', obj: this.datas.dispose })
      }
    },
    //删除牙位
    delPosition(type, positionIndex) {
      if (type == '1') {
        if (positionIndex > 0) {
          this.datas.mouthExamine.splice(positionIndex, 1)
          this.$emit('getDetail', { type: '1', obj: this.datas.mouthExamine })
        }
      }
      if (type == '2') {
        if (positionIndex > 0) {
          this.datas.subsidiaryExamine.splice(positionIndex, 1)
          this.$emit('getDetail', {
            type: '2',
            obj: this.datas.subsidiaryExamine,
          })
        }
      }
      if (type == '3') {
        if (positionIndex > 0) {
          this.datas.diagnose.splice(positionIndex, 1)
          this.$emit('getDetail', { type: '3', obj: this.datas.diagnose })
        }
      }
      if (type == '4') {
        if (positionIndex > 0) {
          this.datas.curePlan.splice(positionIndex, 1)
          this.$emit('getDetail', { type: '4', obj: this.datas.curePlan })
        }
      }
      if (type == '5') {
        if (positionIndex > 0) {
          this.datas.dispose.splice(positionIndex, 1)
          this.$emit('getDetail', { type: '5', obj: this.datas.dispose })
        }
      }
      this.$forceUpdate()
    },
    updateDetail(type) {
      if (type == '1') {
        this.$emit('getDetail', { type: '1', obj: this.datas.mouthExamine })
      }
      if (type == '2') {
        this.$emit('getDetail', {
          type: '2',
          obj: this.datas.subsidiaryExamine,
        })
      }
      if (type == '3') {
        this.$emit('getDetail', { type: '3', obj: this.datas.diagnose })
      }
      if (type == '4') {
        this.$emit('getDetail', { type: '4', obj: this.datas.curePlan })
      }
      if (type == '5') {
        this.$emit('getDetail', { type: '5', obj: this.datas.dispose })
      }
    },
  },
}
</script>
<style scoped>
.rel {
  position: relative;
}
.dv-case {
  display: none;
  position: absolute;
  z-index: 2;
  background: #fff;
  border: 1px solid #dcdfe6;
  border-top: 0;
  width: 100%;
  padding: 0 15px;
  height: 220px;
  overflow: auto;
}
.div-case-small {
  top: 54px;
  width: 865px;
  left: 216px;
}
.case-label {
  position: relative;
  top: 3px;
  width: 80px;
}
.case-content {
  width: 90%;
}
.case-content span {
  cursor: pointer;
  display: flex;
  align-self: center;
  margin: 0 5px;
  margin-top: 5px;
  padding: 0 5px;
  background: #eee;
  min-height: 20px;
  line-height: 20px;
  border-radius: 2px;
}
.btn-del {
  margin-left: 10px;
  height: 34px;
  width: 96px;
}
.p-item {
  position: relative;
  margin-bottom: 20px;
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex-text-start {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-start;
  align-items: center;
}

.flex-text-end {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}

.flex-text-center {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: center;
  align-items: center;
}

.flex-text-between {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.flex-text-around {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
  justify-content: space-around;
  align-items: center;
}
.flex-nowrap {
  /* flex不换行 */
  flex-wrap: nowrap;
}

.flex-wrap {
  /* flex第一行在上方 */
  flex-wrap: wrap;
}
</style>
